<template>
	<view class="execute">
		<titleName :name="name" :backShow="true"></titleName>
		<view style="width: 100vw;height: 4upx;background: #F3F5F7;">

		</view>
		<view class="container">

			<view class="sel-val">
				<view class="line">
					<view class="name"><text class="star">*</text>企业名称</view>
					<view class="val"> <input type="text" disabled v-model="params.enterprise" /></view>
				</view>
				<view class="line">
					<view class="name"><text class="star">*</text>预警等级</view>
					<view class="val">
						<!-- <input type="text" disabled v-model="params.fds" /> -->
						{{params.colorlevel==1?'红色预警':params.colorlevel==2?'橙色预警':'黄色预警'}}
					</view>
				</view>
				<view class="line">
					<view class="name"><text class="star">*</text>启警时间</view>
					<view class="val">
						<input type="text" disabled v-model="params.monitortimestr" />
					</view>
				</view>
				<view class="upload-wrap">
					<view class="name"><text class="star">*</text>落实照片（最少3张）</view>
					<view class="img-wrap">
						<view :class="['for-image',index==2?'sb':'']" @click="searchImage(index)"
							v-for="(item,index) in images" :key="index">
							<image :src="item" mode="">
							</image>
							<view class="dele" v-if="followstatus!=1 && followstatus!=3" @click="deleImage(index)">✕
							</view>
						</view>

						<view class="sel-img" @click="uploadImg" v-if="followstatus!=1 && followstatus!=3">
							<image :src="resourceUrl+'mine-upload-icon.png'" mode=""></image>
							<text>（选择图片）</text>
						</view>
					</view>
				</view>
				<view class="btn-wrap" v-if="followstatus!=1 && followstatus!=3">
					<button class="btn" @click="submit">提交</button>
				</view>
			</view>
		</view>

	</view>

</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import uploadFile from '../../request/uploadFile'
	import {
		resourceUrl
	} from '../../request/config'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	let usertype = ref('')
	let params = ref({})
	let images = ref([])
	let ids = ref('')
	let followstatus = ref('')
	let followattachurl = ref([])
	let name = "管控执行"

	let dateChange = (e) => {
		console.log(e, 'e');
	}
	let deleImage = (index) => {
		images.value.splice(index, 1)
	}

	let getPhoto = (e) => {
		console.log(e, 'e');
	}
	let change = (e) => {
		console.log(e, 'e');
	}
	let searchImage = (index) => {
		uni.previewImage({
			urls: images.value,
			current: index
		})
	}
	let submit = () => {
		if (images.value.length < 3) {
			uni.showToast({
				title: '落实照片最少三张',
				icon: "none"
			})
			return
		}
		uni.showModal({
			title: '提示',
			content: '确定提交吗?',
			success: function(res) {
				if (res.confirm) {
					http({
						url: "/greenNotice/sayFollow",
						data: {
							id: ids.value,
							followattachurl: images.value.join(','),
							messageid: 0
						}
					}).then((res) => {
						if (res.code == 0) {
							uni.showToast({
								title: "提交成功",
								icon: 'none',
								duration: 1500
							})
						}
						setTimeout(() => {
							uni.redirectTo({
								url: `/homePageOther/enterprisewarningcontroldetail/index?id=${ids.value}`
							})
						}, 1500)
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	onLoad((e) => {
		console.log(e, 'e');
		ids.value = e.id
		params.value.colorlevel = e.colorlevel
		params.value.monitortimestr = e.monitortimestr
		params.value.enterprise = e.enterprise
		followstatus.value = e.followstatus
		console.log(followstatus.value, 'followstatus');
		if (!e.followattachurl) {
			images.value = []
		} else {

			images.value = e.followattachurl.split(',')
		}


	})
	let uploadImg = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 10,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths

				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							images.value.push(res.data.url)


						}

					})
				}



			}
		});
	}
</script>

<style lang="scss" scoped>
	.execute {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		:deep(.uni-date) {
			width: 100%;
			height: 94rpx;
			line-height: 94upx;
			border: none !important;
		}

		:deep(.uni-date-x) {

			background-color: #F5F6F8;
		}

		:deep(.uni-date-x--border) {
			border: none !important;
		}

		:deep(.ph-class) {

			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 29rpx;
			color: #999999;

		}

		:deep(.uni-select) {
			height: 94rpx;
			line-height: 94upx;
			border: none !important;
			padding-left: 0upx !important;
		}

		.container {
			height: calc(100vh - 160upx);
			padding-bottom: 170upx;
			overflow: scroll;
			padding-top: 48upx;

			// &:first-of-type(1),
			// &:first-of-type(2),
			// &:first-of-type(3) {
			// 	margin-top: 0upx !important;
			// }

			.top-img {
				padding: 48upx 145upx 20upx 115upx;


				image {
					width: 100%;
					height: 95upx;
				}
			}

			.sel-val {
				padding: 0 40upx 0 50upx;


				.principal {
					margin-bottom: 45upx;
					overflow: hidden;

					.signature {
						width: 100%;
						height: 403rpx;
						background: #F5F6F8;
						border-radius: 7rpx;
						padding: 42upx 40upx 30upx 40upx;

					}

					.name {
						display: flex;
						align-items: center;
						margin-bottom: 30upx;

						.star {
							color: #FF0000;
						}
					}

					.val {
						display: flex;
						align-items: center;
						height: 94rpx;
						border-radius: 7rpx;
						margin-bottom: 40upx;

						text {
							width: 98upx;
							text-align: center;
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 34rpx;
							color: #000000;

						}

						.phone {
							width: 100%;
							background: #F5F6F8 !important;
							margin-left: 14upx;

							input {
								height: 94rpx;
								line-height: 94upx;
								padding-left: 40upx;
							}
						}
					}
				}

				.btn-wrap {
					margin-top: 90upx;

					.btn {
						width: 100%;
						height: 87rpx;
						background: #0874FA;
						border-radius: 43rpx;
						line-height: 87upx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 31rpx;
						color: #FFFFFF;

					}
				}

				.img-wrap {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.for-image {
						width: 200rpx;
						height: 200rpx;
						position: relative;
						margin-left: 18upx;
						margin-bottom: 15upx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 5upx;
						}

						.dele {
							width: 34rpx;
							height: 34rpx;
							background: #989A9E;
							border-radius: 50%;
							position: absolute;
							right: -15rpx;
							top: -15rpx;
							color: #fff;
							font-size: 20upx;
							display: flex;
							align-items: center;
							justify-content: center;
						}

					}

					.sel-img {
						width: 200rpx;
						height: 200rpx;
						border: 2px dashed #BFBFBF;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-left: 18upx;
						margin-bottom: 18upx;

						image {
							width: 56upx;
							height: 50upx;
						}

						text {

							height: 22rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
							margin-top: 17upx;
						}
					}
				}


				.upload-wrap {

					background: #FFFFFF;
					border-radius: 7rpx;



					.name {
						display: flex;
						margin-bottom: 50upx;
						align-items: center;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 34rpx;
						color: #000000;


						.star {
							color: #FF0000
						}
					}


				}

				.line {
					margin-bottom: 45upx;

					.chengnuoshu {
						height: 578upx;
						width: 100%;


					}

					.name {
						display: flex;
						align-items: center;
						margin-bottom: 30upx;

						.star {
							color: #FF0000;
						}


					}

					.val {

						width: 100%;
						height: 94rpx;
						background: #F5F6F8 !important;
						border-radius: 7rpx;
						padding-left: 40upx;
						line-height: 94upx;

						input {
							width: 100%;
							height: 94upx;
							line-height: 94upx;
						}
					}
				}

				.line.date {
					.val {
						padding-left: 20upx;
					}
				}
			}
		}


	}
</style>